<template>
    <div id="MyClockDisplay" class="clock">
        <div id="time"></div>
        <div id="day"></div>
    </div>
</template>

<script setup>
function showTime() {
    var date = new Date();
    var h = date.getHours(); // 0 - 23
    var m = date.getMinutes(); // 0 - 59
    var s = date.getSeconds(); // 0 - 59

    var d = date.getDay();
    var mou = date.getMonth();
    var year = date.getFullYear();
    var session = "AM";

    if (h == 0) {
        h = 12;
    }

    if (h > 12) {
        h = h - 12;
        session = "PM";
    }

    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;

    var time = h + ":" + m + ":" + s + " " + session;
    var day = year + "/" + mou + "/" + d;
    document.getElementById("time").innerText = time;
    document.getElementById("time").textContent = time;
    document.getElementById("day").innerText = day;
    document.getElementById("day").textContent = day;
    setTimeout(showTime, 1000);
}
window.onload = function () {
    showTime();
}

</script>

<style lang="scss" scoped>
// body {
//     background: black;
// }

.clock {
    // position: absolute;
    // top: 50%;
    // left: 50%;
    // transform: translateX(-50%) translateY(-50%);
    color: #17D4FE;
    font-size: 60px;
    font-family: fantasy;
    letter-spacing: 7px;
}
</style>